<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 空白页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">


    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">

    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
     <!--- 引入的phpMyAdmin样式 -->
    <link href="css/print.css" rel="stylesheet">
    <link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet">

    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
</head>
<style>
    body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    margin:0;
    }
    #fullbg {
    background-color:gray;
    left:0;
    opacity:0.5;
    position:absolute;
    top:0;
    z-index:3;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity:0.5;
    }
    #dialog {
    background-color:#fff;
    border:5px solid rgba(0,0,0, 0.4);
    height:400px;
    left:50%;
    margin:-200px 0 0 -200px;
    padding:1px;
    position:fixed !important; /* 浮动对话框 */
    position:absolute;
    top:50%;
    width:400px;
    z-index:5;
    border-radius:5px;
    display:none;
    }
    #dialog p {
    margin:0 0 12px;
    height:24px;
    line-height:24px;
    background:#CCCCCC;
    }
    #dialog p.close {
    text-align:right;
    padding-right:10px;
    }
    #dialog p.close a {
    color:red;
    text-decoration:none;
    } 

    #fullbgs {
    background-color:gray;
    left:0;
    opacity:0.5;
    position:absolute;
    top:0;
    z-index:3;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity:0.5;
    }
    #dialogs {
    background-color:#fff;
    border:5px solid rgba(0,0,0, 0.4);
    height:400px;
    left:50%;
    margin:-200px 0 0 -200px;
    padding:1px;
    position:fixed !important; /* 浮动对话框 */
    position:absolute;
    top:50%;
    width:400px;
    z-index:5;
    border-radius:5px;
    display:none;
    }
    #dialogs p {
    margin:0 0 12px;
    height:24px;
    line-height:24px;
    background:#CCCCCC;
    }
    #dialogs p.closes {
    text-align:right;
    padding-right:10px;
    }
    #dialogs p.closes a {
    color:red;
    text-decoration:none;
    } 
</style>
<body class="gray-bg">
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-4">
            <h2>结构</h2>
        </div>
        <div class="col-sm-8">
            <div class="title-action">
                <a class="btn btn-info dropdown-toggle table-zhe" title="添加字段">添加字段</a>
                <a class="btn btn-info dropdown-toggle index-add" title="添加索引">添加索引</a>
                <a href="?r=tables/show_table&table=<?=$table?>" class="btn btn-info dropdown-toggle" title="浏览">返回</a>
                <a href="?r=fields/field_structure" class="btn btn-primary dropdown-toggle" title="刷新">刷新</a>
                <!-- <a href="?r=fields/field_view" class="btn btn-info dropdown-toggle" title="浏览">浏览</a>
                <a href="?r=fields/field_structure" class="btn btn-primary dropdown-toggle" title="结构">结构</a>
                <a href="#" class="btn btn-warning dropdown-toggle" title="sql">sql</a>
                <a href="#" class="btn btn-success dropdown-toggle" title="搜索">搜索</a>
                <a href="#" class="btn btn-danger dropdown-toggle" title="插入">插入</a>
                <a href="#" class="btn btn-info dropdown-toggle" title="导入">导入</a>
                <a href="#" class="btn btn-primary dropdown-toggle" title="导出">导出</a>
                <a href="#" class="btn btn-warning dropdown-toggle" title="操作">操作</a>
                <a href="#" class="btn btn-success dropdown-toggle" title="触发器">触发器</a> -->
            </div>
        </div>
    </div>

    
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-content">

                <table class="table">
                    <thead>
                        <tr>
                            <?php foreach($key as $k=>$v){?>
                                <td><?php echo $v;?></td>
                            <?php }?>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach($arr as $key=>$val){?>
                        <tr field="<?php echo $val['Field'];?>" class="tr">
                            <?php foreach($val as $k=>$v){?>
                                <td kid="<?php echo $k;?>" inde="<?php echo $v;?>"><span><?php echo $v;?></span></td>
                            <?php }?>
                            <td>
                                <a href="">
                                    <i class="fa fa-check text-navy"></i>
                                </a> | 
                                <a href="javascript:void(0)" class="del" title="删除">
                                    <i class="glyphicon glyphicon-trash"></i>
                                </a>
                                <?php if(!$val['Key']==""){?>
                                    <?php echo '<a href="javascript:void(0)" class="del_index" title="删除索引">
                                            删除当前索引
                                        </a>';?>
                                <?php }?>
                            </td>
                        </tr>
                        <?php }?>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
    <!-- 遮罩层代码部分  Begin-->
    <div id="main">
        <div id="fullbg"></div>
        <div id="dialog">
            <p class="close"><a href="javascript:void(0);" onclick="closeBg();">关闭</a></p>
            <div style="margin-left: 10px;">
                <br>添加字段<br><br>
                    Field：
                    <input type="text" placeholder="请输入Field" name="field_name" id="field"><br><br>
                    Type ：
                     <select id="field_type">
                        <option value="INT">INT</option>
                        <option value="VARCHAR">VARCHAR</option>
                        <option value="TEXT">TEXT</option>
                        <option value="DATE">DATE</option><optgroup label="NUMERIC">
                        <option value="TINYINT">TINYINT</option>
                        <option value="SMALLINT">SMALLINT</option>
                        <option value="MEDIUMINT">MEDIUMINT</option>
                        <option value="INT">INT</option>
                        <option value="BIGINT">BIGINT</option>
                        <option disabled="disabled">-</option>
                        <option value="DECIMAL">DECIMAL</option>
                        <option value="FLOAT">FLOAT</option>
                        <option value="DOUBLE">DOUBLE</option>
                        <option value="REAL">REAL</option>
                        <option disabled="disabled">-</option>
                        <option value="BIT">BIT</option>
                        <option value="BOOLEAN">BOOLEAN</option>
                        <option value="SERIAL">SERIAL</option></optgroup><optgroup label="DATE and TIME">
                        <option value="DATE">DATE</option>
                        <option value="DATETIME">DATETIME</option>
                        <option value="TIMESTAMP">TIMESTAMP</option>
                        <option value="TIME">TIME</option>
                        <option value="YEAR">YEAR</option></optgroup><optgroup label="STRING">
                        <option value="CHAR">CHAR</option>
                        <option value="VARCHAR">VARCHAR</option>
                        <option disabled="disabled">-</option>
                        <option value="TINYTEXT">TINYTEXT</option>
                        <option value="TEXT">TEXT</option>
                        <option value="MEDIUMTEXT">MEDIUMTEXT</option>
                        <option value="LONGTEXT">LONGTEXT</option>
                        <option disabled="disabled">-</option>
                        <option value="BINARY">BINARY</option>
                        <option value="VARBINARY">VARBINARY</option>
                        <option disabled="disabled">-</option>
                        <option value="TINYBLOB">TINYBLOB</option>
                        <option value="MEDIUMBLOB">MEDIUMBLOB</option>
                        <option value="BLOB">BLOB</option>
                        <option value="LONGBLOB">LONGBLOB</option>
                        <option disabled="disabled">-</option>
                        <option value="ENUM">ENUM</option>
                        <option value="SET">SET</option></optgroup><optgroup label="SPATIAL">
                        <option value="GEOMETRY">GEOMETRY</option>
                        <option value="POINT">POINT</option>
                        <option value="LINESTRING">LINESTRING</option>
                        <option value="POLYGON">POLYGON</option>
                        <option value="MULTIPOINT">MULTIPOINT</option>
                        <option value="MULTILINESTRING">MULTILINESTRING</option>
                        <option value="MULTIPOLYGON">MULTIPOLYGON</option>
                        <option value="GEOMETRYCOLLECTION">GEOMETRYCOLLECTION</option>
                    </select><br><br>
                    长  度：<input type="text" placeholder="长度" name="length" >
                    <br><br>
                    是否Null ：
                    <input type="checkbox" name="null" id="field_null"><br><br>
                    是否主键 ：
                    <input type="checkbox" value="1"><br><br>
                    默认值 ：
                    <select name="defa" class="change" id="">
                        <option value="null">NULL</option>
                        <option value=""></option>
                        <option value="empty">Empty String</option>
                    </select>
                    <br>
                    是否自增 ：
                    <input type="checkbox" id="field_ziz" value="1"><br><br>
                    <a  href="javascript:void(0)" class="add" title="添加">添加</a>
            </div>
        </div>
    </div>
    <!-- 遮罩层代码部分  End--> 
    <!-- 遮罩层代码部分  Begin-->
    <div id="mains">
        <div id="fullbgs"></div>
        <div id="dialogs">
            <p class="closes"><a href="javascript:void(0);" onclick="closeBgs();">关闭</a></p>
            <div style="margin-left: 10px;"><br>
                    选择字段 ：
                    <select id="fields_type">
                    <?php foreach($arr as $aa=>$ss){?>
                        <option value="<?=$ss['Field']?>"><?=$ss['Field']?></option>
                    <?php }?>
                    </select><br><br>
                    选择索引 ：
                    <select id="index_type">
                    
                        <option value="index">普通索引</option>
                        <option value="unique">唯一索引</option>
                        <option value="key">主键索引</option>
                    </select><br><br>
                        <input type="text" name="key" placeholder="索引名称"><br>
                    <a  href="javascript:void(0)" class="add_index" title="添加">添加</a>
            </div>
        </div>
    </div>  

    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>

    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>
    
    <script src="js/plugins/iCheck/icheck.min.js"></script>

    <script src="js/demo/peity-demo.js"></script>

    <!-- Peity -->
    <script src="js/plugins/peity/jquery.peity.min.js"></script>


    <script>
        $('.table-zhe').click(function(){
            var bh = $("body").height();
            var bw = $("body").width();
            $("#fullbg").css({
                height:bh,
                width:bw,
                display:"block"
            });
            $("#dialog").show();
        })
        //关闭灰色 jQuery 遮罩
        function closeBg(){
            $("#fullbg,#dialog").hide();
        }

        $('.index-add').click(function(){
            var bh = $("body").height();
            var bw = $("body").width();
            $("#fullbg").css({
                height:bh,
                width:bw,
                display:"block"
            });
            $("#dialogs").show();
        })
        //关闭灰色 jQuery 遮罩
        function closeBgs(){
            $("#fullbg,#dialogs").hide();
        }

        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
        });

        // 全选
        $(function(){
            $("#selected").click(function(){
            
            })
        });
        //添加一行字段
        $(document).on('click','.collapse-links',function(){

            var obj=$(this).parent().parent();
            var clon=obj.clone();
            obj.after(clon);
        })
        //删除当前添加行
        $(document).on('click','.remov',function(){
            var obj=$(this).parent().parent();
            
                obj.remove();
            
        })
        //删除一个字段
        $(document).on('click','.del',function(){
            if(confirm("确认删除字段？")){
                var fid=$(this).parent().parent().attr('field');
               // alert(fid)
                $.ajax({
                    type:"GET",
                    url:"?r=fields/del",
                    data:{
                        "fid":fid,
                    },
                    success:function(msg){
                        alert(msg)
                        location.href="?r=fields/field_structure";
                    }
                });
            };
        })
        //删除索引
        $(document).on('click','.del_index',function(){
            if(confirm("确认删除当前索引？")){
                var fid=$(this).parent().parent().attr('field');
                var inde=$(this).parent().prev().prev().prev().attr('inde');
                // alert(inde)
                // alert(fid)
                $.ajax({
                    type:"GET",
                    url:"?r=fields/del_index",
                    data:{
                        "fid":fid,
                        "inde":inde
                    },
                    success:function(msg){
                        alert(msg)
                        location.href="?r=fields/field_structure";
                    }
                });
            };
        })
        //修改字段
        $(document).on('click','.tr td span',function(){
            var obj=$(this).html();
            $(this).parent().html("<input type='text' value='"+obj+"'/>");
        })
        $(document).on('blur','.tr td input',function(){
            var news=$(this).val();
            var fid=$(this).parent().parent().attr("field");
            var kid=$(this).parent().attr("kid");
            var cha=$(this).parent().next().children("span").html();
            $(this).parent().html("<span>"+news+"</span>");
            $.ajax({
                type:"GET",
                url:"?r=fields/update",
                data:{
                    "news":news,
                    "fid":fid,
                    "kid":kid,
                    "cha":cha,
                },
                success:function(msg){
                    location.href="?r=fields/field_structure";
                }
            })
        })
        //下拉框变值
        $(document).on("change",".change",function(){
            var defa=$("select[name='defa']").val();
            var obj=$(this);
            if(defa==""){
                obj.after('<input type="text" placeholder="默认值" name="moren" id="field_default">');
            }else{
                obj.next().html('<input type="text" placeholder="默认值" name="moren" id="field_default"><br>').remove();
            }
        })
        //提交数据
        $(document).on('click','.add',function(){
        //取值
            var name=$("input[name='field_name']").val();
            var len=$("input[name='length']").val();
            var type=$("select").val();
            //var k=$("input[name='k']").val();
            
            if($("input[type='checkbox']").is(':checked')){
                var nul=0;
            }else{
                var nul=1;
            }
            var defa=$("select[name='defa']").val();
            if(defa==""){
                var dafa=$("input[name='moren']").val();
                // alert(dafa)
            }else if(defa=="null"){
                var dafa="NULL";
            }else if(defa=="empty"){
                var dafa="Empty String";
            }
            alert(dafa)
            $.ajax({                
                type:"POST",
                url:"?r=fields/add",
                data:{
                    'name':name,
                    'len':len,
                    'type':type,
                    'nul':nul,
                    'dafa':dafa
                },
                success:function(msg){
                    alert(msg)
                    location.href="?r=fields/field_structure";                    
                }
            });    
        })
        $(document).on('click','.add_index',function(){
            var field=$("#fields_type").val();
            var type=$("#index_type").val();
            var name=$("input[name='key']").val();
            $.ajax({
                type:'GET',
                url:'?r=fields/add_index',
                data:{
                    'filed':field,
                    'type':type,
                    'name':name
                },
                success:function(msg){
                    if(msg==1){
                        alert("添加成功");
                        location.href="?r=fields/field_structure";
                    }
                }
            })
        })

    </script>
</body>

</html>